<template>
  <div>
      <el-table
        ref="multipleTable"
        :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column prop="art_id" label="ID" width="120"></el-table-column>
      <el-table-column prop="title" label="标题" width="140"></el-table-column>
      <el-table-column prop="cat_id" label="分类" width="120"></el-table-column>
      <el-table-column prop="view" label="浏览量" width="140"></el-table-column>
      <el-table-column prop="pubtime" label="添加日期" :formatter="formatDate" width="150"></el-table-column>

      <el-table-column prop="is_state" label="状态" width="140">
        <template scope="scope">
              <el-switch
                v-model="scope.row.is_state"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="0"
                :inactive-value="1"
                @change="changeStatus(scope.row)">
              </el-switch>
        </template>
      </el-table-column>

      <el-table-column prop="is_state" label="状态" width="80" align="center">
          <template scope="scope">
              <span v-if="scope.row.is_state==1" style="color:red;">停用</span>
              <span v-if="scope.row.is_state==0" style="color:green;">启用</span>
          </template>
      </el-table-column>

     <el-table-column label="操作" width="140" align="center">
         <template scope="scope">
            <el-button type="text" size="mini" @click="blockUp(scope.row)" v-if="scope.row.is_state==1">停用</el-button>
            <el-button type="text" size="mini" @click="startUsing(scope.row)" v-if="scope.row.is_state==0">启用</el-button>
         </template>
     </el-table-column>

     <el-table-column align="center" label="操作" width="200%">
         <template slot-scope="scope">
           <el-button v-if="scope.row.edit" type="success" size="mini"
                      icon="el-icon-circle-check-outline" @click="confirmEdit(scope.row)">保存
           </el-button>
           <el-button v-else type="primary" size="mini"
                      @click="startEdit(scope.row)">编辑
           </el-button>
           <el-button v-if="scope.row.edit" class="cancel-btn" size="mini" icon="el-icon-refresh"
                      type="warning" @click="cancelEdit(scope.row)">取消
           </el-button>
           <!--<el-button type="danger" size="mini" @click="handleConfig(scope.row)">删除</el-button>-->
         </template>
     </el-table-column>


    </el-table>

    <div style="margin-top: 20px">
      <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div>

    <div style="text-align: center;margin-top: 30px;">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="current_change">
          </el-pagination>
    </div>

  </div>
</template>

<script>
  export default {
      data() {
        return {
          tableData: [],
          multipleSelection: [],
          total: 0,
          pagesize:5,
          currentPage:1
        }
      },
      methods: {
        addArt: function() {
          this.axios({
            method: 'GET',
            url: 'https://blog.zongscan.com/admin/arts',
          }).then(res => {
            console.log(res)
            this.tableData = res.data.data;
            this.total= res.data.total;
          }).catch(function () {
              console.log(66)
          })
        },
        current_change:function(currentPage){
          this.currentPage = currentPage
        },

        //改变状态
        changeStatus:function(v) {
          console.log( v.art_id + '--->'+v.is_state)
          //修改状态
          this.axios({
            method: 'GET',
            url: 'https://blog.zongscan.com/admin/artedit',
            params: {'art_id':v.art_id,'is_state':v.is_state}
          }).then(res => {
            console.log(res.data)
            this.$alert('状态修改成功!', 'is_state', {
                confirmButtonText: 'ok'
            })
          }).catch(function () {
            console.log('is_state')
          })
        },
        //日期转化
        formatDate(row, column) {
          return this.functions.formatDate(row, column)
        },

        toggleSelection(rows) {
          if (rows) {
            rows.forEach(row => {
              this.$refs.multipleTable.toggleRowSelection(row);
            });
          } else {
            this.$refs.multipleTable.clearSelection();
          }
        },
        handleSelectionChange(val) {
          this.multipleSelection = val;
        }

      },
      mounted: function () { 　　　　
        this.addArt()　　
      }
  }
</script>

<style>
</style>
